<!-- 按钮 》 批量删除 -->

<template>
  <el-button
    v-if="CORE.MAP.HAS_DEL"
    v-bind="commonProps"
    :disabled="!CORE.MAP.CAN_DEL || disabled"
    @click.stop="toClick"
    @dblclick.native.stop="toDbClick"
  >
    <slot>
      <SlotBtn v-bind="slotProps" />
    </slot>
  </el-button>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixBtn from '../mixBtn'

const name = 'BtnDelMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixBtn],

  /**
   * 属性注册
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 批量属性
     */
    multi() {
      const { slotProps, tipPrefix, tipMiddle, tipWord, tipSuffix } = this
      const warning = `请选择${tipWord}`
      const title = slotProps.title
      const tip = this.tip || `${tipPrefix}${title}${tipMiddle}${tipWord}${tipSuffix}`
      return { warning, title, tip }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 按钮点击
     */
    async toClick() {
      const { onClick, mutation, payload, state, commit, multi } = this

      // 有指定方法
      if (onClick) onClick()

      // 有默认提交
      else if (mutation) {
        if (CORE.isJSON(state.param) && CORE.isJSON(state.one)) {
          if (CORE.isEmpty(state.param.idList)) {
            CORE.MSG.warning(`请选择${multi.warning}`)
            return // 不再触发 click 事件
          } else {
            await CORE.CONFIRM.error(multi.tip, multi.title) // 取消时不触发 click 事件
            this.$set(state.one, 'idList', state.param.idList)
          }
        }
        commit(mutation, payload)
      }

      // 其他情况触发事件
      this.$emit('click')
    },
  },
}
</script>
